<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script src="../../lib/vue.js"></script>
</head>

<body>
  <!-- 我们创建的Vue实例 vm 会控制这个div中的所有内容 -->
  <!-- 被控制的这个元素区域，就是 MVVM 中的 V View 视图层内容 -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>
  <script>
    // 2. 创建一个 Vue 的实例
    // 当我们导入包以后，在浏览器的内存中，就多了一个 Vue 的构造函数
    // 这个 vm 对象，就是 MVVM 中的 VM调度者
    var vm = new Vue({
      el: "#app", // 表示我们当前 new 的这个 Vue 实例，要控制页面上的哪个区域
      // data 就是 MVVM 中的 M Model，专门用来保存每个页面的数据
      data: {
        // data 属性中，存放着 el(element) 中要用到的数据
        // 通过 Vue 提供的指令，很方便的就能把数据渲染到界面上
        // 本次实验使用的 {{ msg }} 这种写法，称为 插值表达式 p11
        // 所谓 p11 意思就是说，Vue.js实战 电子PDF 的第11页
        msg: "欢迎学习Vue",
        // 前端框架都不提倡使用者自己去手动操作DOM元素（JQuery似乎不是），Vue就是这样
      },
    });
  </script>
</body>

</html>